<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sa="http://www.thymeleaf.org/extras/sa-token">

<head th:fragment="head">
    <meta charset="UTF-8">
    <title>首页</title>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
    <link href="//cdn.staticfile.org/layui/2.9.7/css/layui.css" rel="stylesheet">
    <script src="//cdn.staticfile.org/layui/2.9.7/layui.js"></script>
    <style>
        /* 使右侧导航项靠右 */
        .layui-nav-right {
            float: right;
        }

        ul li:hover {
            border-bottom: 1px gray solid;
        }
    </style>
</head>

<body>
    <!-- 导航栏 -->
    <ul class="layui-nav" th:fragment="nav">
        <li class="layui-nav-item"><a href="/" style="font-size: larger;">电脑销售网</a></li>
        <!-- <li class="layui-nav-item"><a href="/index">菜单1</a></li>
        <li class="layui-nav-item"><a >菜单2</a></li> -->
        <!-- 右侧导航项 -->
        <li class="layui-nav-item layui-nav-right" id="loginBtn" sa:notLogin><a href="/login">登录</a></li>
        <li class="layui-nav-item layui-nav-right" id="logoutBtn" sa:login><a href="/logout">退出</a></li>
        <!-- <li class="layui-nav-item layui-nav-right" >
            <img src="http://cdn.qiniu.liyansheng.top/img/avatar.png" class="layui-nav-img">
        </li> -->
    </ul>

    <!-- <div>
        <div style="text-align: center;background-color: #4191C2;color: white;height: 150px;">
            <h1 style="padding: 50px">XXXX</h1>
        </div>
    </div> -->
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-xs2" th:fragment="snav">
                <div class="layui-card">
                    <div class="layui-card-body" style="line-height: 50px;text-align: center;">
                        <ul>
                            <li><a href="/">电脑选购</a></li>
                            <li sa:login><a href="/cart" sa:hasRole="user">购物车</a></li>
                            <li sa:login><a href="/orders/me" sa:hasRole="user">我的订单</a></li>
                            <li sa:login><a href="/product" sa:hasRole="admin">商品管理</a></li>
                            <li sa:login><a href="/orders" sa:hasRole="admin">订单管理</a></li>
                            <li><a href="/userinfo">个人信息</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs10">
                <div class="layui-container">
                    <form action="/" method="get">
                        <div class="layui-input-block">
                            <input type="search" name="keyword" value="" placeholder="请输入商品名称" autocomplete="off"
                                class="layui-input">
                        </div>
                    </form>
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md3" th:each="p:${products}">
                            <div class="layui-card">
                                <div class="layui-card-header">
                                    <h3><span th:text="${p.name}">商品1</span></h3>
                                </div>
                                <div class="layui-card-body">
                                    <img th:src="${p.imgUrl}" alt="商品1" style="width: 100%;height: 200px;object-fit: cover">
                                    <p th:text="${p.price}">价格：$100</p>
                                    <a th:href="'/product/'+${p.id}">
                                        <button type="button" class="layui-btn layui-btn-primary">查看详情</button>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

</html>